<template>
  <div>
    <el-row type="flex" justify="center" align="middle" class="licc-add-order-top-row">
      <el-row type="flex" justify="center" align="middle"  style="width:1100px;">
        <el-col class="licc-add-order-goods-list-bread">
          填写订单
        </el-col>
      </el-row>
    </el-row>

    <el-row type="flex" justify="center" align="middle" class="licc-add-order-top-row">
      <el-row type="flex" justify="center" align="middle"  style="width:1100px;">
        <el-table
          ref="multipleTable"
          :data="shopCarts"
          tooltip-effect="dark"
          style="width: 100%;  padding-left: 20px">
          <el-table-column
            label="商品 - 名称"
            width="330">
            <template slot-scope="scope">
              <div class="licc-add-order-goods-item">
                <div class="licc-add-order-p-img">
                  <router-link :to="{path:'/goodsInfo',query:{goodsId:scope.row.goodsId,catId:scope.row.catId}}" target="_blank">
                    <img width="80" :src="scope.row.url" title="图片解释">
                  </router-link>
                </div>
              </div>
              <div class="licc-add-order-item-msg">
                <div class="licc-add-order-p-name">
                  <router-link :to="{path:'/goodsInfo',query:{goodsId:scope.row.goodsId,catId:scope.row.catId}}" target="_blank">
                    {{scope.row.goodsName}}
                  </router-link>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="尺寸"
            width="180"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="licc-add-order-props-txt">{{scope.row.productName}}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="单价"
            width="180">
            <template slot-scope="scope">
              <div class="licc-add-order-plus-switch">¥{{scope.row.shopPrice + scope.row.productPrice}}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="数量"
            width="180">
            <template slot-scope="scope">
              <div class="licc-add-order-quantity">{{scope.row.cartNum}}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="价格"
            width="170">
            <template slot-scope="scope">
              <div class="licc-add-order-plus-sum">¥{{(((scope.row.shopPrice + scope.row.productPrice)*100)*scope.row.cartNum)/100}}</div>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-row>

    <el-row type="flex" justify="center" align="middle" class="licc-add-order-top-row">
      <el-row type="flex" justify="start" align="middle"  style="width:1100px; background-color: #fff">
        <el-col style="padding: 0px 20px;">
          <el-row>
            <el-col class="licc-add-order-postscript-title">
              订单地址
              <em style="float: right; padding-right: 20px; cursor: pointer" @click="dialogAddressVisible = true">+&nbsp;地址</em>
            </el-col>
          </el-row>
          <el-row>
            <el-col style="padding-bottom: 20px">
              <el-collapse accordion>
                <el-collapse-item>
                  <template slot="title">
                    {{addressInfo.consignee}} - {{addressInfo.phone}} - {{addressInfo.provinceName}}{{addressInfo.cityName}}{{addressInfo.districtName}}{{addressInfo.streetName}} - {{addressInfo.address}}
                  </template>
                  <div
                    class="licc-add-order-address-collapse"
                    :class="{'licc-add-order-address-collapse-index':index==addressInfoindex}"
                    v-for="(item, index) in addressInfos"
                    :key="item.id"
                    @click="addressChoose(item, index)">
                    {{item.consignee}} - {{item.phone}} - {{item.provinceName}}{{item.cityName}}{{item.districtName}}{{item.streetName}} - {{item.address}}
                  </div>
                </el-collapse-item>
              </el-collapse>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-row>


    <el-row type="flex" justify="center" align="middle" class="licc-add-order-top-row">
      <el-row type="flex" justify="start" align="middle"  style="width:1100px; background-color: #fff">
        <el-col style="padding: 0px 20px;">
          <el-row>
            <el-col class="licc-add-order-postscript-title">
              订单附言
            </el-col>
          </el-row>
          <el-row>
            <el-col style="padding-bottom: 20px">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="postscript">
              </el-input>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-row>
    <el-row type="flex" justify="center" align="middle" class="licc-add-order-top-row">
      <el-row type="flex" justify="center" align="middle"  style="width:1100px;">
        <el-col class="licc-add-order-cart-bottom">
          <el-col class="licc-add-order-cart-toolbar-right">
            <div class="btn-area">
              <a class="licc-add-order-cart-submit-btn" @click="submitOrder">提交订单</a>
            </div>
            <div class="price-sum">
              <span>总价：</span>
              <span class="licc-add-order-cart-price"><em>¥{{cartPrice.toFixed(2)}}</em></span>
            </div>
          </el-col>
        </el-col>
      </el-row>
    </el-row>
    <!-- 详细信息 -->
    <div>
      <el-dialog title="添加地址信息" :visible.sync="dialogAddressVisible" width="60%">
         <span>
          <address-dialog v-if="dialogAddressVisible" @addressLast="addressLastFun" @addressSuccess="addressSuccessFun"></address-dialog>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import orderCartApi from '@/api/order'
  import persinalApi from "@/api/personal"
  import Code from '@/utils/code'
  import AddressDialog from '../components/addressDialog'
  export default {
    name: 'addOrder',
    components: {
      AddressDialog
    },
    data() {
      return {
        query: this.$route.query,
        /** 购物信息 **/
        shopCarts: [],
        cartPrice: 0.00,
        /** 地址信息 **/
        addressInfos:[],
        /** 地址信息索引 **/
        addressInfoindex:0,
        addressInfo:{
          consignee:""
        },
        /** 订单附言 **/
        postscript:'',
        /** 订单Dialog **/
        dialogAddressVisible: false,
      }
    },
    created(){
      this.initPage();
    },
    methods: {
      initPage(){
        this.shopCarts = [];
        console.log(typeof (this.query.shopCartIds));
        let params = (typeof(this.query.shopCartIds)=="undefined")?[]:((typeof(this.query.shopCartIds)=="string")?[this.query.shopCartIds]:(this.query.shopCartIds.length==0)?[]:this.query.shopCartIds);
        orderCartApi.addOrderInfosByShopCart(params).then(res => {
          this.shopCarts = res.data;
          this.allPriceUtil(this.shopCarts);
          this.initAddressInfos();
        }).catch(() => {

        })
      },
      initAddressInfos(){
        persinalApi.initAddressInfo().then(res => {
          this.addressInfos = [];
          this.addressInfos = res.data;
          if (this.addressInfos.length>0){
            this.addressInfo = this.addressInfos[0];
          }
        }).catch(() => {

        })
      },
      /** 地址信息点击切换 **/
      addressChoose(item, index){
        this.addressInfoindex = index;
        this.addressInfo = item;
      },
      /** 地址信息取消 **/
      addressLastFun(){
        this.dialogAddressVisible = false;
      },
      /** 地址信息成功 **/
      addressSuccessFun(){
        this.initAddressInfos();
        this.dialogAddressVisible = false;
      },
      /** 处理总价格 **/
      allPriceUtil(infos){
        let allPirce = 0.00;
        infos.forEach((value, index) => {
          allPirce = (allPirce*100 + (((value.shopPrice + value.productPrice)*100)*value.cartNum))/100;
        });
        this.cartPrice = allPirce;
      },
      /** 提交订单信息 **/
      submitOrder(){
        if (this.addressInfos.length === 0){
          this.$notify.warning({title: '提示', message: '你还没有收货地址信息，请添加地址信息'});
          return false;
        }
        orderCartApi.submitOrderByCart(this.shopCarts, this.cartPrice, this.addressInfo, this.postscript).then(res => {
          console.log(res);
          let orderSn = res.data.orderSn;
          let amount = res.data.goodsAmount;
          if (res.code == Code.SUCC) {
            /** 提交成功 **/
            this.$confirm('订单提交继续支付？', '立即付款', {
              confirmButtonText: '确定',
              cancelButtonText: '稍等',
              type: 'warning'
            }).then(() => {
              // orderCartApi.payOrder({id:res.data.id,orderStatus:30}).then(res => {
              //   this.$notify({title: '成功', message: '下单支付成功', type: 'success'});
              //   this.$router.push({name:'allOrderInfo'});
              // }).catch(() => {
              //   this.$notify.info({title: '提示', message: '系统繁忙，请稍后再支付', type: 'success'});
              // })
              this.$router.push({name:'orderPay', query:{orderSn: orderSn, amount: amount}});
            }).catch(() => {
              this.$notify({title: '提示', message: '订单等待支付', type: 'success'});
              this.$router.push({name:'allOrderInfo'});
            });
          } else {
            this.$notify.error({title: '失败', message: '订单提交失败'});
          }
        }).catch(() => {
          this.$notify.error({title: '失败', message: '订单提交失败'});
        })
      },
    }
  }
</script>
<style>
  .licc-add-order-top-row{
    width: 100%;
    margin-top: 20px;
  }

  .licc-add-order-goods-list-bread{
    width: 1100px;
    text-align: left;
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    background-color: #fff;;
  }
  /** 商品--开始 **/
  .licc-add-order-p-img {
    float: left;
    width: 80px;
    height: 80px;
    border: 1px solid #eee;
    margin-right: 10px;
    background: #fff;
    padding: 0;
    text-align: center;
    overflow: hidden;
  }
  .licc-add-order-p-img img{
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: middle;
  }
  .licc-add-order-item-msg{
    margin: 0;
    padding: 0;
    line-height: 20px;
  }
  .licc-add-order-p-name {
    margin: 0;
    padding: 0;
    height: 40px;
    line-height: 20px;
    overflow: hidden;
  }
  .licc-add-order-p-name a{
    color: #333;
  }

  .licc-add-order-props-txt{
    height: 80px;
    width: 130px;
    color: #333;
  }
  .licc-add-order-plus-switch{
    height: 80px;
    width: 110px;
    color: #333;
    text-align:left;
  }
  .licc-add-order-quantity{
    height: 80px;
    width: 140px;
  }
  .licc-add-order-plus-sum{
    height: 80px;
    width: 100px;
    color: #333;
    text-align:left;
  }
  .licc-add-order-p-name a:hover{
    color: #E2231A;
  }
  /** 商品--结束 **/
  .licc-add-order-address-collapse{
    text-align: left;
    cursor: pointer;
  }
  .licc-add-order-address-collapse:hover{
    background-color: #F2F6FC;
    color: #409EFF;
  }
  .licc-add-order-address-collapse-index{
    background-color: #F2F6FC;
    color: #409EFF;
  }
  .licc-add-order-postscript-title{
    height: 30px;
    text-align: left;
    font-size: 14px;
    line-height: 30px;
    color: #909399;
    font-weight: bold;
  }
  .licc-add-order-icon-plus:hover{
    color: red;
  }
  .licc-add-order-cart-bottom{
    width: 1100px;
    height: 50px;
    background-color: #fff;;
  }
  .licc-add-order-cart-toolbar-right{
    float: left;
    height: 50px;
    width: 1100px;
    line-height: 50px;

  }
  .btn-area {
    float: right;
  }
  .licc-add-order-cart-submit-btn {
    display: block;
    position: relative;
    width: 94px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-family: "Microsoft YaHei";
    background: #e54346;
    overflow: hidden;
  }
  .price-sum {
    float: right;
    height: 50px;
    line-height: 50px;
    margin: 0px 20px 0 10px;
    color: #666;
    width: auto;
    position: relative;
  }
  .licc-add-order-cart-price em {
    font-size: 16px;
    color: #E2231A;
    font-weight: 700;
  }
</style>
